import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface GaugeStageProps {
    chartId?: string;
    width?: string;
    height?: string;
    thick?: number;
    color?: any[];
    min?: number;
    max?: number;
    value?: number;
    unit?: string;
}

@customElement('lit-gauge-stage')
export class LitGaugeStage extends LitElement {
    @property({type: String}) chartId: string = 'lit-gauge-stage-chart';
    @property({type: String}) width: string = '800px';
    @property({type: String}) height: string = '600px';
    @property({type: Number}) thick: number = 1;
    @property({type: Array}) color: any[] = [
        [0.3, '#67e0e3'],
        [0.7, '#37a2da'],
        [1, '#fd666d']
    ];
    @property({type: Number}) min: number = 0;
    @property({type: Number}) max: number = 100;
    @property({type: Number}) value: number = 0;
    @property({type: String}) unit: string = '';

    getSeries(): any[] {
        return [
            {
                type: 'gauge',
                min: this.min,
                max: this.max,
                axisLine: {
                    lineStyle: {
                        width: 30 * this.thick,
                        color: this.color
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: -30 * this.thick,
                    length: 8 * this.thick,
                    lineStyle: {
                        color: '#fff',
                        width: 2 * this.thick
                    }
                },
                splitLine: {
                    distance: -30 * this.thick,
                    length: 30 * this.thick,
                    lineStyle: {
                        color: '#fff',
                        width: 4 * this.thick
                    }
                },
                axisLabel: {
                    color: 'inherit',
                    distance: 40 * this.thick,
                    fontSize: 20 * this.thick,
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value} ' + this.unit,
                    color: 'inherit'
                },
                data: [
                    {
                        value: this.value,
                    }
                ]
            }
        ];
    };

    option: echarts.EChartsOption = {
        series: this.getSeries()
    };

    static styles = style;

    updated(): void {
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-gauge-stage': LitGaugeStage;
    }
}